<template>
  <div class="app-container">
    <div class="topDiv">
      <div>
        <p class="title">
          <img src="@/assets/img/ptsz.png" alt style="height: 17px" />
          <span>短信模板</span>
        </p>

        <div class="statementBox">
          <div class="statement_name_Box">我是标题</div>
          <div class="statement_main_Box">
            模板名称：自定义填写，便于后台搜索查询选择。
            <br />
            模板ID：聚合数据、阿里大于需在服务商申请短信模板并审核，模板ID处填写服务商申请的模板ID。
            <br />
            短信签名:
            阿里大于需在服务商申请短信签名并审核，短信签名处填写服务商申请的短信签名，亿美软通则可自定义填写。
            <br />
            数据值：聚合数据、阿里大于需在数据值中填写服务商模板变量对应的商城的变量(可在右侧选择商城变量)。
            <br />
            短信内容：亿美软通可直接自定义填写短信内容(可在右侧选择商城变量)。
            <br />
            状态：商城短信模板状态，关闭后将不能选择此模板，关闭后仍可在模板列表发送测试短信。
            <br />
            <span style="margin-top: 5px; color: red"
              >注意：阿里大于同一手机号60秒内只能发送一次，请根据需求选择适当接口。</span
            >
          </div>
        </div>

        <div>
          <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="medium"
            label-width="110px"
          >
            <el-form-item label="模板名称" prop="field101">
              <el-input
                v-model="formData.field101"
                placeholder="请输入模板名称"
                clearable
                :style="{ width: '30%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="服务商" prop="field102">
              <el-select
                v-model="formData.field102"
                placeholder="请选择下拉选择下拉选择"
                clearable
                :style="{ width: '30%' }"
              >
                <el-option
                  v-for="(item, index) in field102Options"
                  :key="index"
                  :label="item.smsName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="模板ID" prop="field103">
              <el-input
                v-model="formData.field103"
                placeholder="请输入模板ID"
                clearable
                :style="{ width: '30%' }"
              >
              </el-input>
            </el-form-item> -->
            <el-form-item label="模板code" prop="field103">
              <el-input
                v-model="formData.field103"
                placeholder="请输入模板code"
                clearable
                :style="{ width: '30%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="模板类型" prop="field104">
              <el-radio-group
                v-model="formData.field104"
                size="medium"
                @input="remindTextShowButton"
              >
                <el-radio
                  v-for="(item, index) in field108Options2"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>

            <el-form-item
              label="短信内容示例"
              v-show="formData.field104 == '密码'"
            >
              <el-input
                v-model="formData.field106"
                placeholder=" 您好，您的密码为${password}，请及时登录并修改密码，登录地址为：av.91weiduan.cn/${url}"
                clearable
                disabled
                type="textarea"
                :style="{ width: '30%' }"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              label="短信内容示例"
              v-show="formData.field104 == '验证码'"
            >
              <el-input
                v-model="formData.field106"
                placeholder="您的验证码：${code}，您正进行身份验证，打死不告诉别人！"
                clearable
                disabled
                type="textarea"
                :style="{ width: '30%' }"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="短信内容" prop="field105">
              <el-input
                v-model="formData.field105"
                placeholder="请输入短信内容"
                clearable
                type="textarea"
                :style="{ width: '30%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="提醒" v-show="remindTextShow">
              <span style="color: Red">{{ formData.field107 }}</span>
            </el-form-item>

            <!-- <el-form-item label="状态" prop="field108">
              <el-radio-group v-model="formData.field108" size="medium">
                <el-radio
                  v-for="(item, index) in field108Options"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item> -->

            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getMenuList,
  getConfig,
  addTemplate,
  getConfigList,
  editTemplate,
} from "@/api/system/index.js";
export default {
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      //提醒短信内容
      remindTextShow: false,
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field104: "密码",
        field105: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
      },
      rules: {
        field101: [
          {
            required: true,
            message: "请输入模板名称",
            trigger: "blur",
          },
        ],
        field102: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        field104: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        field105: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        field106: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        field107: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        field108: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
      },
      field102Options: [
        // {
        //   label: "选项一",
        //   value: 1,
        // },
      ],
      field108Options: [
        {
          label: "启用",
          value: "启用",
        },
        {
          label: "禁用",
          value: "禁用",
        },
      ],
      field108Options2: [
        {
          label: "密码",
          value: "密码",
        },
        {
          label: "验证码",
          value: "验证码",
        },
      ],
      total: 0,
      loading: false,

      userId: "",
    };
  },
  async created() {},
  async mounted() {
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
    this.getData();
  },
  methods: {
    async getData() {
      const data = await getConfig({ userId: this.userId });
      if (data.code == 200) {
        this.field102Options = data.rows;
      }
      if (this.$route.query.id) {
        this.formData = {
          field101: this.$route.query.smsTemplateName,
          field102: this.$route.query.smsConfigId - 0,
          field103: this.$route.query.code,
          field104: this.$route.query.smsTemplateType,
          field105: this.$route.query.text,
          field106: undefined,
          field107: undefined,
          field108: undefined,
        };
      }

      // //console.log(data, "889");
    },
    //模板类型切换
    remindTextShowButton() {
      this.remindTextShow = false;
      // if(formData.field104=='密码'){
      //    this.remindTextShow=false;
      // }else{
      //    this.remindTextShow=false;
      // }
    },
    //确定按钮
    submitForm() {
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid) return;
        let param = {
          smsConfigId: this.formData.field102 - 0, //服务商id
          smsTemplateCode: this.formData.field103, //模板code
          smsTemplateName: this.formData.field101, //模板名称
          smsTemplateState: "禁用", //短信模板状态，启用和禁用，默认先传禁用
          smsTemplateText: this.formData.field105, //短信内容
          smsTemplateType: this.formData.field104, //模板类型
          userId: this.userId,
        };

        if (this.formData.field104 == "密码") {
          if (
            this.formData.field105.includes("${password}") &&
            this.formData.field105.includes("${url}")
          ) {
            if (this.$route.query.id) {
              param.id = this.$route.query.id;
              const data = await editTemplate(param);
              if (data.code == 200) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
               
                 history.back()
              } else {
                this.$message.error(data.msg);
              }
            } else {
              const data = await addTemplate(param);
              // //console.log(data, "67878");
              if (data.code == 200) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.getData();
                  this.formData = {
                    field101: undefined,
                    field102: undefined,
                    field103: undefined,
                    field104: "密码",
                    field105: undefined,
                    field106: undefined,
                    field107: undefined,
                    field108: undefined,
                  };
              } else {
                this.$message.error(data.msg);
              }
            }
          } else {
            this.remindTextShow = true;
            this.formData.field107 = "内容必须包含'${url}'和'${password}'";
          }
        } else {
          if (this.formData.field105.includes("${code}")) {
            const data = await addTemplate(param);
            // //console.log(data, "67878");
            if (data.code == 200) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.formData = {
                field101: undefined,
                field102: undefined,
                field103: undefined,
                field104: "密码",
                field105: undefined,
                field106: undefined,
                field107: undefined,
                field108: undefined,
              };
            } else {
              this.$message.error(data.msg);
            }
          } else {
            this.remindTextShow = true;
            this.formData.field107 = "内容必须包含'${code}'";
          }
        }
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
  watch: {},
};
</script>
<style scoped lang="scss">
.statementBox {
  border: 1px #eee solid;
  height: auto;
  margin-bottom: 50px;
  .statement_name_Box {
    //  border: 1px red solid;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0px 20px;
    background: rgb(248, 248, 248);
  }
  .statement_main_Box {
    font-size: 14px;
    color: #666;
    // border: 1px red solid;
    // display: flex;
    // align-items: center;
    padding: 20px;
    // flex-wrap:wrap;
  }
}
//弹窗在屏幕中间
::v-deep .el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
.myQuillEditor {
  // border:1px red solid;
  height: 500px;
}
.buttonstyle {
  margin: 90px 0px;
  width: 100px;
}
.inputWidth {
  // width: 310px;
  width: 100%;
}
.app-container {
  .title {
    padding: 0px 0px 8px 0px;
    margin: 5px 0px 10px 0px;
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    img {
      height: 30px;
      margin-right: 10px;
    }
  }
}
.topDiv {
  padding: 0px 20px;
  overflow: hidden;
  height: auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 5px;

  .poR {
    position: relative;
    .poA {
      position: absolute;
      left: 50%;
      bottom: -30px;
      transform: translateX(-50%);
    }
    .poDiv {
      border: 1px solid #40a0ff00;
      border-radius: 5px;
      padding: 15px;
      .poImg {
        width: 100%;
      }
    }
    .isActive {
      border: 1px solid #409eff;
    }
  }
  .textData {
    background-color: rgb(245, 245, 245);
    padding: 20px;
    border-radius: 7px;
    .colDiv {
      background-color: rgb(252, 252, 252);
      border: 1px solid rgb(230, 230, 230);
      padding: 20px;
    }
  }
}
</style>
